<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			style="width: 420px;height: 230px;">
			<block v-for="(item,index) in banner" :key="item.id">
				<swiper-item>
					<image :src="item.url" mode="" style="width: 420px;height: 230px;"></image>
				</swiper-item>
			</block>
		</swiper>
		<!-- 分类区 -->
		<view class="fen">
			<view class="fena">
				<div v-for="(item,index) in menu" :key="index" class="fenb">
					<div class="fenb1">
						<img :src="item.iconUrl" style="width: 35rpx;height: 35rpx;">
					</div>
					<div class="fenb2">{{item.name}}</div>
				</div>
			</view>
		</view>
		<!-- 优惠区 -->
		<view class="you">
			<div class="youa">
				<div class="youb">优惠卷</div>
				<div v-for="(item,index) in youhui" :key="index" class="youc">
					<div class="youc1">
						<div class="youc2">
							<div class="youc3">
								$<p style="font-size: 50rpx;">{{item.discount}}元</p>
							</div>
							<div class="youc4">
								{{item.name}}
							</div>
						</div>
						<div class="youc5">
							{{item.desc}}-{{item.tag}}
						</div>
					</div>
				</div>
			</div>
		</view>
		<!-- 团购区 -->
		<view class="turn">
			<div class="turn1">
				<div v-for="(item,index) in tuango" :key="index">
					<div class="turn2">
						<div>
							<img :src="item.picUrl" alt="" style="width: 150rpx;height: 180rpx;">
						</div>
						<div>
							<div>{{item.name}}</div>
							<div>{{item.brief}}</div>
							<div class="turn3">
								<span class="turn4">{{item.grouponMember}}人成团</span>
								<span class="turn5">{{item.grouponDiscount}}元在减</span>
							</div>
							<div class="turn6">
								<span>${{item.grouponPrice}}.00</span>
								<span class="turn7">
									{{item.grouponDiscount}}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				menu: [],
				youhui: [],
				tuango: []
			}
		},
		onLoad() {
			// 分类接口
			uni.request({
				url: 'http://47.91.230.137:8086/wx/home/index',
				success: (res) => {
					this.banner = res.data.data.banner
					this.menu = res.data.data.channel
					this.tuango = res.data.data.grouponList
					this.youhui = res.data.data.couponList
					// console.log(this.menu)
				}
			});

		}
	}

</script>

<style>
	.fen {
		display: flex;
		justify-content: center;
		width: 100%;
		margin-top: 10rpx;

	}

	.fena {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: 95%;
		background: #ffffff;
		height: 260rpx;
	}

	.fenb {
		width: 16%;
	}

	.fenb1 {
		display: flex;
		justify-content: center;
	}

	.fenb2 {
		display: flex;
		justify-content: center;
	}

	.you {
		margin-top: 50rpx;
	}

	.youa {
		width: 95%;
		height: 50orpx;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: auto;
	}

	.youb {
		display: flex;
		justify-content: flex-start;
		width: 90%;
		margin-top: 20rpx;
	}

	.youc {
		display: flex;
		flex-direction: column;
		padding-top: 3rpx;
		border: red solid 2rpx;
		width: 90%;
		margin: auto;
	}

	.youc1 {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 150rpx;
	}

	.youc2 {
		display: flex;
		flex-direction: row;
		width: 50%;
		justify-content: space-around;
	}

	.youc3 {
		color: red;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.youc4 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.youc5 {
		color: #b7b7b7;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		width: 38%;
		align-items: center;
		color: #b7b7b7;
		display: flex;
		justify-content: center;
		width: 38%;
		align-items: center;
	}
	.turn{
		margin-top: 50rpx;
	}
	.turn1{
		width: 95%;
		background-color: #ffffff;
		margin: auto;
	}
	.turn2{
		display: flex;
		fleX-direction: row;
		padding-top: 40rpx;
	}
	.turn3{
		font-size: 25rpx;
	}
	.turn4{
		border: blue solid 3rpx;
		color: blue;
	}
	.turn5{
		border: red solid 3rpx;
		color: red;
	}
	.turn6{
		font-size: 29rpx;
		margin-top: 20rpx;
	}
	.turn7{
		margin-left: 1rpx;
		text-decoration: line-through;
		font-size: 25rpx;color: darkgrey;
	}

	/* .lun{
		width: 100%;
		height: 100%;
		background-color: #ececec;
		position: relative;
	}
	.luna{
		height: 180px;
		border-radius: 5px;
		width: 100%;
	} */

</style>

